<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_元素显示模式</title>
    <style>
        div {
            /*  块级元素可以自定义宽高，元素竖着排
                 div 默认高度为0，宽度为父级宽度的100%*/
            border: 2px solid mediumpurple;
            display: block;
        }
        span {
            background: #00FF00;
            /*  行内元素无法设置宽高*/
            border: 1px solid red;
        }
        .d2 {
            display: none;/*设置显示模式为消失，此元素会释放自己原来占有的页面布局空间*/
        }
    </style>
</head>
<body>
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>

    <span>4444</span>
    <span>5555</span>
    <span>6666</span>

    <hr>
    <input type="text">
    <input type="text">
    <button>按钮</button>
</body>
</html>